﻿<template>
  <div>
    <draggable class = "widget-form-list" style = ''
    v-model = "data.list" v-bind = "{group:{name: 'formlayout', pull:true}, sort:true}">
      <div v-for = "(element, index) in data.list" :key="element.config.uid" @click.stop="handleselectFormItem(index)">
        <div class="dynamic_single">
          <component :ref="element.config.uid" :key="element.config.uid" v-bind:is="element.componentName"
            :config="element.config"
            :events="element.events"
            :otherModel.sync="otherModel"
            :commonConfig="commonConfig"
            :isDesignMode="true"
            v-model="element.value"
            @onDesignEvent="handleDesignEvent"></component>
        </div>
        <div class = 'dynamic_singleBtns'>
          <el-button title = "删除" @click.stop = "handleFormItemDelete(index)" type = "danger" size = 'mini' round>
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </div>
    </draggable>
    <add-component @addItem="addItem"></add-component>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import ContextMenu from '@/components/common/ContextMenu.vue'
import addComponent from '../DynamicComponents/addComponent.vue'
import { formComponents, layoutComponents, otherComponents } from '../data/componentsData.js'
export default {
  components: {
    Draggable,
    ContextMenu,
    addComponent
  },
  props: ['data', 'select', 'commonConfig'],
  data () {
    return {
      formComponents,
      layoutComponents,
      otherComponents,
      selectFormItem: this.select,
      drawer: false,
      contextMenu: [{
        text: '添加',
        icon: 'icon-add'
      }],
      otherModel: {}
    }
  },
  mounted () {
    document.body.ondrop = function (event) {
      let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
      if (isFirefox) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
  },
  methods: {
    onMenuClick (text) {
      if (text === '添加') {
        this.drawer = true
      }
    },
    drawerClose () {
      this.drawer = false
    },
    // 选择单个元素时
    handleselectFormItem (index) {
      this.selectFormItem = this.data.list[index]
    },
    addItem (item) {
      let d = item
      this.data.list.push(d)
      this.handleselectFormItem(this.data.list.length - 1)
      this.drawerClose()
    },
    handleFormItemAdd (evt) {
      // const newIndex = evt.newIndex
      // this.selectFormItem = this.data.list[newIndex]
    },
    // 点击删除时
    handleFormItemDelete (index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectFormItem = {}
        } else {
          this.selectFormItem = this.data.list[index - 1]
        }
      } else {
        this.selectFormItem = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    handleDesignEvent (event, sender, targetData) {
      if (event === 'selectItem') {
        this.selectFormItem = targetData
      }
    }
  },
  watch: {
    select (val) {
      this.selectFormItem = val
    },
    selectFormItem: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    },
    'data.list': {
      handler (val) {
      },
      deep: true
    }
  }
}
</script>
<style>
.content-add {
  width: 100%;
  text-align: center;
}
.widget-container {
  min-height: 550px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
